<template>
    <div>
      <Modal width="1200"  footer-hide v-model="reportActionDetailShow" title="状态同步记录" >
        <div class="report-content">
          <!--F1 报备详情 -->
          <div class="report-f1">
            <Table border :columns="reportColumns" :data="reportData"></Table>
          </div>
          <!-- F2 交易状态变更记录 -->
          <div class="report-f2">
            <Table border :columns="dealColumns" :data="dealData"></Table>
          </div>
          <!--F3 同步记录 -->
          <div class="report-f3">
            <Table border :columns="asyncColumns" :data="asyncData"></Table>
          </div>
        </div>
      </Modal>
    </div>
</template>

<script>
import { formatTime } from '@/utils'
import Api from '@/api'

const report = Api.report
export default {
  name: 'reportActionDetailModal',
  data() {
    return {
      reportActionDetailShow: false,
      apiLogId: '',
      reportData: [],
      dealData: [],
      asyncData: [],
      reportColumns: [
        { title: '报备来源', key: 'source' },
        { title: '楼盘名称', key: 'premisesName' },
        { title: '客户姓名', key: 'customerName' },
        { title: '客户电话', key: 'customerPhone' },
        { title: '报备人姓名', key: 'reportName' },
        { title: '报备人手机号', key: 'reportPhone' },
        { title: '报备人组织架构', key: 'reportDeptName' },
        {
          title: '报备人报备时间',
          key: 'createTime',
          minWidth: 160,
          width: 160,
          render: (h, params) => (
            h('div', {}, formatTime(params.row.createTime, 'second'))
          )
        },
        {
          title: '报备推荐人',
          key: 'recommenderName',
          width: 120,
          render: (h, params) => (
            h('div', {}, params.row.recommenderName ? params.row.recommenderName : '无')
          )
        },
      ],
      dealColumns: [
        { title: '渠道王实际状态变更记录', key: 'status' },
        {
          title: '变更时间',
          key: 'changeTime',
          render: (h, params) => (
            h('div', {}, formatTime(params.row.changeTime, 'second'))
          )
        },
        { title: 'V10同步状态记录', key: 'syncResult' },
        {
          title: '同步时间',
          key: 'syncTime',
          render: (h, params) => (
            h('div', {}, formatTime(params.row.syncTime, 'second'))
          )
        },
        { title: '备注原因', key: 'remark' },
        {
          title: '操作',
          key: '',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.sendStatus();
                  }
                }
              }, '补推状态'),
            ]);
          }
        }
      ],
      asyncColumns: [
        { title: '同步状态', key: 'status' },
        {
          title: '同步时间',
          key: 'syncTime',
          render: (h, params) => (
            h('div', {}, formatTime(params.row.syncTime, 'second'))
          )
        },
        {
          title: '同步结果',
          key: 'syncResult',
          render: (h, params) => (
            h('div', {}, params.row.syncResult ? '已同步' : '同步异常')
          )
        },
        {
          title: 'requestContent',
          key: 'requestContent',
          render: (h, params) => (
            h('Input', {
              props: {
                value: params.row.requestContent
              },
            }, params.row.requestContent)
          )
        },
        { title: 'responseContent', key: 'responseContent' },
        { title: '备注原因', key: 'remark' },
        // {title:'操作',key:''},
      ]
    }
  },
  methods: {
    initData(reportInfo) {
      this.reportData.push(reportInfo);
      this.reportActionDetailShow = true;
      this.apiLogId = reportInfo.id;
      this.getDealList(this.apiLogId);
    },
    // 获取交易信息
    async getDealList(id) {
      const _self = this;
      const value = { id }
      const params = {
        ...value
      }
      const { responseCode, data } = await this.$request(report.v10ReportDetail, params)
      if (responseCode === '1') {
        _self.dealData = data.tradingStatusLog;
        _self.asyncData = data.syncLog
      }
    },
    // 获取交易信息
    async sendStatus() {
      const _self = this;
      const value = { id: _self.apiLogId };
      const params = {
        ...value
      };
      const { responseCode, data } = await this.$request(report.sendStatus, params)
      if (responseCode === '1') {
        this.$Notice.success({
          title: '补推已发送',
          desc: '请查看具体补推信息 '
        });
      } else {
        this.$Notice.error({
          title: '补推失败',
          desc: '请查看具体信息'
        });
      }
    },
    cleanParams() {
      this.apiLogId = '';
      this.reportData = [];
      this.dealData = [];
      this.asyncData = [];
    }
  }
}
</script>

<style scoped>
  .report-f1{margin: 10px 0;}
  .report-f2{margin: 10px 0;}
  .report-f3{margin: 10px 0;}
  .report-content{height: 750px;overflow-y:scroll}
</style>
